<template>
  <div class="asset-group">
    <div class="asset-info" @click="showPopup">
      <van-icon class="icon" :name="items[active].icon" />
      <div class="text" :class="fee || 'text-flex'">
        <span>{{items[active].name}}</span>
        <span>{{items[active].money | bi}}</span>
      </div>
      <van-icon class="icon icon-down" name="arrow-down" />
    </div>
    <div class="asset-right" v-if="fee">
      <span>{{fee}}</span>手续费
    </div>
    <van-popup v-model="show" class="asset-popup">
      <van-cell-group>
        <div class="popup-title van-hairline--top-bottom">请选择货币类型</div>
        <van-cell v-for="(item,index) in items" :key="index" clickable @click="select(index)">
          <van-icon slot="icon" :name="item.icon" class="popup-icon" />
          <div slot="title" class="popup-name">{{item.name}}</div>
        </van-cell>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      show: false
    };
  },
  props: {
    fee: [String],
    items: Array
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    select(index) {
      this.active = index;
      this.show = false;
    }
  }
};
</script>

<style scoped>
.asset-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: #606266;
  font-size: 14px;
  line-height: 16px;
}

.asset-popup {
  width: 80%;
  border-radius: 10px;
}
.asset-popup .popup-title {
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  color: #323233;
}
.asset-popup .popup-icon {
  font-size: 20px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  margin-right: 5px;
  color: #606266;
}

.asset-popup .popup-name {
  color: #606266;
}

.asset-info {
  display: flex;
  align-items: center;
}

.asset-info .icon {
  font-size: 16px;
}

.asset-info .text {
  padding: 0 5px;
}

.asset-info .text.text-flex {
  display: flex;
  flex-direction: column;
}

.asset-right {
  font-size: 12px;
}
</style>
